<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
  </head>
  <body>
    <div style="margin-bottom: 10px">
      <input style="width: 300px" id="input" />
      <button id="hlButton">高亮</button>
    </div>
    <div style="display: flex; align-items: flex-start">
      <div>
        <textarea id="origin" style="height: 300px; width: 200px"></textarea>
      </div>
      <div style="margin-left: 20px; height: 300px; width: 200px; border: 1px solid #000" id="highlighted"></div>
    </div>
    <script src="./htmlReplacer.preview.js"></script>
    <script type="text/javascript">
      document.querySelector('#hlButton').addEventListener('click', () => {
        var origin = document.querySelector('#origin').value
        var wordStr = document.querySelector('#input').value
        var words = wordStr.split(',').reduce((array, item) => {
          var [word, color] = item.split('#')
          return array.concat({
            word,
            color
          })
        }, [])
        var result = htmlReplacer.highlight(origin, words)
        console.log(result)
        document.querySelector('#highlighted').innerHTML = result
      })
    </script>
  </body>
</html>
